<template>
    <div>
        <el-card shadow="never">
            <el-form>
                <el-tabs class="demo-tabs">
                    <el-tab-pane label="基本配置">
                        <el-form-item label="网站名称">
                            <el-input v-model='formState.title'></el-input>
                        </el-form-item>
                        <el-form-item label='关键词'>
                            <el-input v-model='formState.keywords'></el-input>
                        </el-form-item>
                        <el-form-item label='客服电话'>
                            <el-input v-model='formState.tel'></el-input>
                        </el-form-item>
                        <el-form-item label='网站介绍'>
                            <el-input type="textarea" v-model='formState.description'></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="支付/API接口">
                        <el-form-item label='收款商户号ID'>
                            <el-input v-model='formState.apis.mch_id'></el-input>
                        </el-form-item>
                        <el-form-item label='小程序APPID'>
                            <el-input v-model='formState.apis.app_id'></el-input>
                        </el-form-item>
                        <el-form-item label='小程序APPSCRET'>
                            <el-input v-model='formState.apis.app_secret'></el-input>
                        </el-form-item>
                        <el-form-item label='支付通知地址'>
                            <el-input v-model='formState.apis.notify_url'></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="充值&奖励金额">
                        <el-form-item label='会员卡金额'>
                            <el-input v-model='formState.charge_num'></el-input>
                        </el-form-item>
                        <el-form-item label='奖励金额'>
                            <el-input v-model='formState.reward_num'></el-input>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
                <el-form-item>
                    <el-button type='primary' @click.prevent='onSubmit'>保存提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>
  
<script lang='ts' setup>
import { http } from '@/plugins/axios'

const formState = ref({
    id: null,
    title: '',
    keywords: '',
    tel: '',
    description: '',
    apis: {
        mch_id: '',//收款商户号ID
        app_secret: '',//商户号秘钥
        app_id: '',//小程序APPID
        notify_url: '',//支付通知地址
    },
    charge_num: 99,
    reward_num: 10,
})

const show = async () => {
    const data = await http.request({
        url: "config",
        method: "get"
    })
    if (data.id) {
        formState.value = data
    }
}
show();
const onSubmit = async () => {
    console.log(formState.value)
    await http.request({
        url: `config`,
        method: 'PUT',
        data: formState.value,
    })
}
</script>
  
<style></style>
  